import React from 'react';
import classNames from 'classnames';
import styles from './cocobit-hexinban.css';
import Box from '../box/box.jsx';

const CocobitHexinban = ({ led_highlight }) => (
  <Box>
    <div className={styles.cocobitPreviewHexinban}>
      <div className={styles.cocobitHexinban}>
        <svg id="ccb-cube-svg" width="100%" height="100%" viewBox="0 0 614 490" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <filter id="f1" x="-75%" y="-75%" width="300%" height="300%"><feMorphology operator="dilate" radius="4" in="SourceAlpha" result="thicken"></feMorphology><feGaussianBlur stdDeviation="5" in="thicken" result="blurred"></feGaussianBlur><feFlood floodColor="rgb(255, 0, 0)" result="glowColor"></feFlood><feComposite in="glowColor" in2="blurred" operator="in" result="ledglow_colored"></feComposite><feMerge><feMergeNode in="ledglow_colored"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter>
          </defs>
          <g>
            <rect className="floor" x="0" y="0" width="614" height="490" style={{ fill: '#171717' }}></rect>
          </g>
          <g>
            <rect x="137" y="40" width="340" height="340" rx="40" ry="40" style={{ fill: '#8f9392' }}></rect>
          </g>
          <g>
            <rect x="181" y="75" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_0 ? '1' : '0' }} id="ccb-cube-rect-0" x="179" y="73" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(0,0)</title></rect>
            <rect x="222" y="75" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_1 ? '1' : '0' }} id="ccb-cube-rect-1" x="220" y="73" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(1,0)</title></rect>
            <rect x="262" y="75" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_2 ? '1' : '0' }} id="ccb-cube-rect-2" x="260" y="73" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(2,0)</title></rect>
            <rect x="303" y="75" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_3 ? '1' : '0' }} id="ccb-cube-rect-3" x="301" y="73" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(3,0)</title></rect>
            <rect x="343" y="75" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_4 ? '1' : '0' }} id="ccb-cube-rect-4" x="341" y="73" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(4,0)</title></rect>
            <rect x="384" y="75" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_5 ? '1' : '0' }} id="ccb-cube-rect-5" x="384" y="73" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(5,0)</title></rect>
            <rect x="424" y="75" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_6 ? '1' : '0' }} id="ccb-cube-rect-6" x="422" y="73" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(6,0)</title></rect>


            <rect x="181" y="117" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_7 ? '1' : '0' }} id="ccb-cube-rect-7" x="179" y="115" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(0,1)</title></rect>
            <rect x="222" y="117" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_8 ? '1' : '0' }} id="ccb-cube-rect-8" x="220" y="115" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(1,1)</title></rect>
            <rect x="262" y="117" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_9 ? '1' : '0' }} id="ccb-cube-rect-9" x="260" y="115" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(2,1)</title></rect>
            <rect x="303" y="117" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_10 ? '1' : '0' }} id="ccb-cube-rect-10" x="301" y="115" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(3,1)</title></rect>
            <rect x="343" y="117" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_11 ? '1' : '0' }} id="ccb-cube-rect-11" x="341" y="115" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(4,1)</title></rect>
            <rect x="384" y="117" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_12 ? '1' : '0' }} id="ccb-cube-rect-12" x="384" y="115" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(5,1)</title></rect>
            <rect x="424" y="117" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_13 ? '1' : '0' }} id="ccb-cube-rect-13" x="422" y="115" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(6,1)</title></rect>


            <rect x="181" y="159" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_14 ? '1' : '0' }} id="ccb-cube-rect-14" x="179" y="157" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(0,2)</title></rect>
            <rect x="222" y="159" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_15 ? '1' : '0' }} id="ccb-cube-rect-15" x="220" y="157" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(1,2)</title></rect>
            <rect x="262" y="159" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_16 ? '1' : '0' }} id="ccb-cube-rect-16" x="260" y="157" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(2,2)</title></rect>
            <rect x="303" y="159" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_17 ? '1' : '0' }} id="ccb-cube-rect-17" x="301" y="157" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(3,2)</title></rect>
            <rect x="343" y="159" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_18 ? '1' : '0' }} id="ccb-cube-rect-18" x="341" y="157" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(4,2)</title></rect>
            <rect x="384" y="159" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_19 ? '1' : '0' }} id="ccb-cube-rect-19" x="384" y="157" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(5,2)</title></rect>
            <rect x="424" y="159" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_20 ? '1' : '0' }} id="ccb-cube-rect-20" x="422" y="157" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(6,2)</title></rect>


            <rect x="181" y="201" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_21 ? '1' : '0' }} id="ccb-cube-rect-21" x="179" y="199" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(0,3)</title></rect>
            <rect x="222" y="201" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_22 ? '1' : '0' }} id="ccb-cube-rect-22" x="220" y="199" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(1,3)</title></rect>
            <rect x="262" y="201" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_23 ? '1' : '0' }} id="ccb-cube-rect-23" x="260" y="199" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(2,3)</title></rect>
            <rect x="303" y="201" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_24 ? '1' : '0' }} id="ccb-cube-rect-24" x="301" y="199" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(3,3)</title></rect>
            <rect x="343" y="201" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_25 ? '1' : '0' }} id="ccb-cube-rect-25" x="341" y="199" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(4,3)</title></rect>
            <rect x="384" y="201" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_26 ? '1' : '0' }} id="ccb-cube-rect-26" x="384" y="199" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(5,3)</title></rect>
            <rect x="424" y="201" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_27 ? '1' : '0' }} id="ccb-cube-rect-27" x="422" y="199" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(6,3)</title></rect>


            <rect x="181" y="243" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_28 ? '1' : '0' }} id="ccb-cube-rect-28" x="179" y="241" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(0,4)</title></rect>
            <rect x="222" y="243" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_29 ? '1' : '0' }} id="ccb-cube-rect-29" x="220" y="241" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(1,4)</title></rect>
            <rect x="262" y="243" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_30 ? '1' : '0' }} id="ccb-cube-rect-30" x="260" y="241" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(2,4)</title></rect>
            <rect x="303" y="243" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_31 ? '1' : '0' }} id="ccb-cube-rect-31" x="301" y="241" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(3,4)</title></rect>
            <rect x="343" y="243" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_32 ? '1' : '0' }} id="ccb-cube-rect-32" x="341" y="241" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(4,4)</title></rect>
            <rect x="384" y="243" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_33 ? '1' : '0' }} id="ccb-cube-rect-33" x="384" y="241" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(5,4)</title></rect>
            <rect x="424" y="243" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_34 ? '1' : '0' }} id="ccb-cube-rect-34" x="422" y="241" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(6,4)</title></rect>

            <rect x="181" y="285" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_35 ? '1' : '0' }} id="ccb-cube-rect-35" x="179" y="283" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(0,5)</title></rect>
            <rect x="222" y="285" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_36 ? '1' : '0' }} id="ccb-cube-rect-36" x="220" y="283" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(1,5)</title></rect>
            <rect x="262" y="285" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_37 ? '1' : '0' }} id="ccb-cube-rect-37" x="260" y="283" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(2,5)</title></rect>
            <rect x="303" y="285" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_38 ? '1' : '0' }} id="ccb-cube-rect-38" x="301" y="283" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(3,5)</title></rect>
            <rect x="343" y="285" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_39 ? '1' : '0' }} id="ccb-cube-rect-39" x="341" y="283" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(4,5)</title></rect>
            <rect x="384" y="285" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_40 ? '1' : '0' }} id="ccb-cube-rect-40" x="384" y="283" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(5,5)</title></rect>
            <rect x="424" y="285" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_41 ? '1' : '0' }} id="ccb-cube-rect-41" x="422" y="283" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(6,5)</title></rect>

            <rect x="181" y="327" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_42 ? '1' : '0' }} id="ccb-cube-rect-42" x="179" y="325" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(0,6)</title></rect>
            <rect x="222" y="327" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_43 ? '1' : '0' }} id="ccb-cube-rect-43" x="220" y="325" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(1,6)</title></rect>
            <rect x="262" y="327" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_44 ? '1' : '0' }} id="ccb-cube-rect-44" x="260" y="325" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(2,6)</title></rect>
            <rect x="303" y="327" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_45 ? '1' : '0' }} id="ccb-cube-rect-45" x="301" y="325" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(3,6)</title></rect>
            <rect x="343" y="327" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_46 ? '1' : '0' }} id="ccb-cube-rect-46" x="341" y="325" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(4,6)</title></rect>
            <rect x="384" y="327" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_47 ? '1' : '0' }} id="ccb-cube-rect-47" x="384" y="325" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(5,6)</title></rect>
            <rect x="424" y="327" width="10" height="26" rx="1" ry="1" className={classNames(styles.svgFillB, styles.ccbCubeRectLight)}></rect>
            <rect style={{ opacity: led_highlight.led_48 ? '1' : '0' }} id="ccb-cube-rect-48" x="422" y="325" width="14" height="30" rx="1.5" ry="1.5" className={classNames(styles.svgFillA, styles.ccbCubeRect)} filter="url(#f1)"><title>(6,6)</title></rect>
          </g>
        </svg>
      </div>
    </div>
  </Box>
)
export default CocobitHexinban